<template>
  <div class="house-list">
    <h2 class="title">热门精选</h2>
    <div class="list">
      <template v-for="item in houseList" :key="item.data.houseId">
        <house-item-type9
          v-if="item.discoveryContentType === 9"
          :item-data="item.data"
          @click="toDetailPage(item.data)"  
        />
        <house-item-type3
          v-else-if="item.discoveryContentType === 3"
          :item-data="item.data"
          @click="toDetailPage(item.data)"  
        />
      </template>
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import { storeToRefs } from "pinia"

  import houseItemType9 from "@/components/house-item-type9/house-item-type9.vue"
  import houseItemType3 from "@/components/house-item-type3/house-item-type3.vue"

  import useHomeStore from '@/stores/modules/home'


  const HomeStore = useHomeStore()
  const { houseList } = storeToRefs(HomeStore)

  // 跳转至详情页
  const router = useRouter()
  const toDetailPage = (item) => {
    router.push("/detail/" + item.houseId)
  }
</script>

<style lang="less" scoped>
  .house-list {

    .title {
      margin: 20px 0 0 20px;
      font-size: 21px;
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      padding: 8px;
    }
  }
</style>